<div class="test_wrap">
  <div class="top_container scroll_container" style.height="calc(100% - {{ responseContainerHeight }}px)">
    <form auto-focus-form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm" class="flex header-container">
      <eo-ng-input-group nzCompact>
        <eo-ng-select class="!w-[106px] flex-none main-bg" [(ngModel)]="model.request.method" formControlName="method">
          <eo-ng-option *ngFor="let item of REQUEST_METHOD" [nzLabel]="item.key" [nzValue]="item.value"></eo-ng-option>
        </eo-ng-select>
        <div
          *ngIf="store.getCurrentEnv.hostUri"
          nz-typography
          nzEllipsis
          class="env_front_uri"
          nzTooltipTitle="{{ store.getCurrentEnv.hostUri }}"
          nzTooltipPlacement="bottom"
          eoNgFeedbackTooltip
        >
          {{ store.getCurrentEnv.hostUri }}
        </div>
        <nz-form-item nz-col class="flex-1">
          <nz-form-control [nzValidateStatus]="this.validateForm.controls.uri" i18n-nzErrorTip nzErrorTip="Please enter URL">
            <input
              type="text"
              class="rounded-r main-bg"
              i18n-placeholder
              placeholder="Enter URL"
              name="uri"
              eo-ng-input
              (input)="updateParamsbyUri(model.request.uri)"
              formControlName="uri"
              [(ngModel)]="model.request.uri"
            />
          </nz-form-control>
        </nz-form-item>
      </eo-ng-input-group>
      <button type="submit" id="btn-test" eo-ng-button nzType="primary" class="ml-[10px] w-[100px]" (click)="clickTest()">
        <span *ngIf="status !== 'testing'" i18n><span>Send</span></span>
        <span *ngIf="status === 'testing'" i18n>Abort</span>
        <span *ngIf="status === 'testing' && waitSeconds" class="ml-1">{{ waitSeconds }}</span>
      </button>
      <button type="button" *ngIf="isEmptyTestPage" eo-ng-button nzType="default" (click)="saveApi()" class="ml-[10px]" i18n>
        Save as API
      </button>
    </form>
    <!-- Request Info -->
    <eo-ng-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [nzAnimated]="false" [(nzSelectedIndex)]="model.requestTabIndex">
      <!-- Request Headers -->
      <eo-ng-tab [nzTitle]="headerTitleTmp">
        <ng-template #headerTitleTmp>
          <span i18n="@@RequestHeaders">Headers</span>
          <nz-badge
            *ngIf="bindGetApiParamNum(model.request.requestHeaders)"
            class="ml-1 ant-badge-theme-color"
            nzStatus="success"
          ></nz-badge>
        </ng-template>
        <eo-api-test-header
          class="eo_theme_iblock"
          [(model)]="model.request.requestHeaders"
          (modelChange)="emitChangeFun('requestHeaders')"
        ></eo-api-test-header>
      </eo-ng-tab>
      <!--Request Info -->
      <eo-ng-tab [nzTitle]="bodyTitleTmp">
        <ng-template #bodyTitleTmp>
          <span i18n>Body</span>
          <nz-badge
            class="ml-1 ant-badge-theme-color"
            *ngIf="
              ['formData', 'json', 'xml'].includes(model.request.requestBodyType)
                ? bindGetApiParamNum(model.request.requestBody)
                : model.request.requestBody?.length
            "
            nzStatus="success"
          ></nz-badge>
        </ng-template>
        <eo-api-test-body
          class="eo_theme_iblock"
          [(contentType)]="model.contentType"
          [(autoSetContentType)]="model.autoSetContentType"
          (contentTypeChange)="changeContentType($event)"
          [(bodyType)]="model.request.requestBodyType"
          (bodyTypeChange)="changeBodyType($event)"
          [(model)]="model.request.requestBody"
          (modelChange)="emitChangeFun('requestBody')"
          [supportType]="['formData', 'raw', 'binary']"
        >
        </eo-api-test-body>
      </eo-ng-tab>
      <eo-ng-tab [nzTitle]="queryTitleTmp">
        <ng-template #queryTitleTmp>
          <span i18n>Query</span>
          <nz-badge *ngIf="bindGetApiParamNum(model.request.queryParams)" class="ml-1 ant-badge-theme-color" nzStatus="success"></nz-badge>
        </ng-template>
        <eo-api-test-query
          class="eo_theme_iblock"
          [(model)]="model.request.queryParams"
          (modelChange)="emitChangeFun('queryParams')"
        ></eo-api-test-query>
      </eo-ng-tab>
      <eo-ng-tab [nzTitle]="restTitleTmp">
        <ng-template #restTitleTmp>
          <span i18n>REST</span>
          <nz-badge *ngIf="bindGetApiParamNum(model.request.restParams)" class="ml-1 ant-badge-theme-color" nzStatus="success"></nz-badge>
        </ng-template>
        <eo-api-test-rest
          class="eo_theme_iblock"
          [(model)]="model.request.restParams"
          (modelChange)="emitChangeFun('restParams')"
        ></eo-api-test-rest>
      </eo-ng-tab>
      <eo-ng-tab [nzTitle]="preScriptTitleTmp">
        <ng-template #preScriptTitleTmp>
          <span i18n>Pre-request Script</span>
          <nz-badge class="ml-1 ant-badge-theme-color" *ngIf="model.beforeScript?.trim()" nzStatus="success"></nz-badge>
        </ng-template>
        <eo-api-script
          *ngIf="model.requestTabIndex === 4"
          [(code)]="model.beforeScript"
          (codeChange)="emitChangeFun('beforeScript')"
          [treeData]="BEFORE_DATA"
          [completions]="beforeScriptCompletions"
          class="eo_theme_iblock"
        ></eo-api-script>
      </eo-ng-tab>
      <eo-ng-tab [nzTitle]="suffixScriptTitleTmp">
        <ng-template #suffixScriptTitleTmp>
          <span i18n>After-response Script</span>
          <nz-badge class="ml-1 ant-badge-theme-color" *ngIf="model.afterScript?.trim()" nzStatus="success"></nz-badge>
        </ng-template>
        <eo-api-script
          *ngIf="model.requestTabIndex === 5"
          [(code)]="model.afterScript"
          (codeChange)="emitChangeFun('afterScript')"
          [treeData]="AFTER_DATA"
          [completions]="afterScriptCompletions"
          class="eo_theme_iblock"
        ></eo-api-script>
      </eo-ng-tab>
    </eo-ng-tabset>
  </div>

  <div
    class="bottom_container scroll_container"
    nz-resizable
    [nzMinHeight]="50"
    [style.height.px]="responseContainerHeight"
    [style.--bottom-height]="responseContainerHeight - 15 + 'px'"
    (nzResize)="onResize($event)"
  >
    <nz-resize-handle class="z-10 horizontal container-draggable" nzDirection="top"> </nz-resize-handle>
    <!-- Response -->
    <eo-ng-tabset
      [nzTabBarStyle]="{ 'padding-left': '10px' }"
      [(nzSelectedIndex)]="model.responseTabIndex"
      [nzTabBarExtraContent]="extraTemplate"
      [nzAnimated]="false"
      class="response_container"
      (nzSelectChange)="handleBottomTabSelect($event)"
    >
      <eo-ng-tab i18n-nzTitle nzTitle="Response">
        <eo-api-test-result-response [model]="model.testResult?.response" [uri]="model.request.uri"> </eo-api-test-result-response>
      </eo-ng-tab>
      <div>
        <eo-ng-tab *ngIf="model.testResult?.response?.headers" i18n-nzTitle nzTitle="Response Headers">
          <eo-api-test-result-header class="p-base" [model]="model.testResult?.response?.headers"></eo-api-test-result-header>
        </eo-ng-tab>
      </div>
      <eo-ng-tab *ngIf="model.testResult.request.requestBody" i18n-nzTitle nzTitle="Body">
        <!-- TODO use isRequestBodyLoaded -->
        <eo-api-test-result-request-body *ngIf="model.responseTabIndex === 2" [model]="model.testResult.request.requestBody || ''">
        </eo-api-test-result-request-body>
      </eo-ng-tab>
      <eo-ng-tab *ngIf="model.testResult?.request?.requestHeaders" i18n-nzTitle nzTitle="Request Headers">
        <eo-api-test-result-header class="p-base" [model]="model.testResult?.request?.requestHeaders"> </eo-api-test-result-header>
      </eo-ng-tab>
    </eo-ng-tabset>
    <ng-template #extraTemplate>
      <div *ngIf="model.responseTabIndex === 0" class="py-[6px] px-[12px] flex items-center">
        <button eo-ng-button nzType="text">
          <eo-iconpark-icon
            name="download"
            *ngIf="!isEmpty(model.testResult?.response)"
            class="cursor-pointer"
            i18n-nzTooltipTitle
            eoNgFeedbackTooltip
            nzTooltipTitle="Save As File"
            (click)="downloadFile()"
          >
          </eo-iconpark-icon>
        </button>
      </div>
    </ng-template>
    <div id="test-response"></div>
  </div>
</div>
